import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { SectionV3Wrapper } from './style'
import SectionHeader from '@/components/section-header'
import SectionFooter from '@/components/section-footer'
import ScrollView from '@/base-ui/scroll-view'
import RoomItem from '@/components/room-item'

const HomeSectionV3 = memo(function HomeSectionV3(props) {
  const { infoData } = props

  return (
    <SectionV3Wrapper>
      <SectionHeader title={infoData.title} subtitle={infoData.subtitle} />

      <div className="room-list">
        <ScrollView>
          {infoData.list.map((item) => {
            return <RoomItem key={item.id} itemData={item} itemwidth="20%" />
          })}
        </ScrollView>
      </div>

      <SectionFooter name="plus" />
    </SectionV3Wrapper>
  )
})

HomeSectionV3.propTypes = {
  infoData: PropTypes.object,
}

export default HomeSectionV3
